<template>
        <div class="common">
            <!--                            评论区发表-->
            <p>评论</p>
            <div class="block">
                <el-rate v-model="value1"></el-rate>
            </div>
            <textarea type="textarea" class="inputCommon" placeholder="请输入评论"></textarea>
            <!--                            一个横线而已-->
            <el-divider></el-divider>
            <!--                            评论区主体-->
            <div class="commonAll">
                <div v-for="v in commentAll" :key="v.commentId" class="rescommon">
                    <div>
                        <div class="heat" style="overflow: hidden;padding-top: 10px">
                            <img :src="v.user.nickname=='游客'?nos:v.user.avatarUrl" alt="">
                            <span class="nickName">
                                                {{v.user.nickname}}
                                            </span>
                            <div class="block commonStar">
                                <el-rate v-model="v.score"></el-rate>
                            </div>
                            <br>
                            <!--                                            评论内容-->
                            <div class="commontText">{{v.commentContent}}</div>
                            <!--                                            评论时间及回复-->
                            <div class="commontTime">
                                <span>{{v.updatedTime}}</span>&nbsp;&nbsp;<span>回复</span></div>
                            <br>
                            <!--                                            回复的评论-->
                            <div class="commonIn" v-if="v.subCommentList.length">
                                <div v-for="value in v.subCommentList" :key="value.commentId"
                                     style="overflow: hidden">
                                    <div class="commonInList">
                                        <div class="commontListIn">
                                            <img :src="value.user.avatarUrl" alt="" class="heatIn">
                                            <!--                                                        发起人-->
                                            <span class="blueFont">{{value.createdBy}}&nbsp;</span>
                                            <!--                                                        回复-->
                                            <span>回复</span>
                                            <!--                                                        被评论者-->
                                            <span class="blueFont">{{value.parentUserName}}:</span>
                                            <!--                                                        评论的话-->
                                            <span>{{value.commentContent}}</span>
                                        </div>
                                        <div class="commontTimeIn">
                                            <span>{{value.createdTime}}</span>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <el-pagination
                    background
                    layout="prev, pager, next,total"
                    :total="commentTotalNum"
                    @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>

</template>

<script>
    import nos from "../../../assets/个人_fill.png";
    import {comment} from "../../../api/comment";

    export default {
        name: "commen",
        data(){
            return {
                value1: 5,
                //头像
                nos: nos,
                //    评论的全部数据
                commentAll: {},
                commentTotalNum:0,
                data:{}
            }
        },
        created() {
            // this.data={pageNum:1,pageSize:10}
            comment("/pc/comment/commentList/course/" + this.$route.query.id+"?pageNum=1&pageSize=10").then(res => {
                console.log(res)
                this.commentAll = res.rows
                this.commentTotalNum=res.total
            })
        },
        methods:{
            handleCurrentChange(data){
                comment("/pc/comment/commentList/course/" + this.$route.query.id+"?pageNum="+data+"&pageSize=10").then(res => {
                    console.log(res)
                    this.commentAll = res.rows
                    this.commentTotalNum=res.total
                })
    }
        }
    }
</script>

<style scoped lang="less">
    /*发表评论 */
    .inputCommon {
        height: 126px;
        width: 95%;
        line-height: 20px;
        padding: 5px;
        font-size: 14px;
        /*font-weight: 700;*/
        resize: none;
    }

    .inputCommon:focus {
        outline: none;
        border: 1px solid #179a3c;
        box-shadow: 0 0 5px;

    }
    /*    评论区主体*/
    .common {
        padding-right: 50px;
        padding-left: 30px;
        padding: 20px;
        min-height: 235px;
        padding-right: 50px;
    }
    .commonAll {
        font-size: 16px;
        color: #7d7d7d;
    }
    .rescommon {
        border-bottom: 1px solid #d9d9d9;
        padding-bottom: 30px;
    }

    /*    头像*/

    .heat > img,
    .heatIn {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        overflow: hidden;
    }

    /*星星*/

    .commonStar {
        float: right;
    }

    .commontText {
        line-height: 35px;
        padding: 5px;
        padding-left: 30px;
        font-size: 14px;
    }

    .nickName {
        position: relative;
        top: -10px;
        font-size: 14px;
        padding: 10px;
    }

    .commontTime {
        float: right;
        color: #a5a5a5;
        font-size: 14px;
    }

    /*    评论内的评论*/

    .commonIn {
        width: 1030px;
        padding: 10px;
        border: 1px solid #cbcbcb;
        float: right;
        background-color: #f5f5f5;
    }

    /*评论内的评论*/

    .commonInList {
        font-size: 14px;

    .blueFont {
        color: #0089c9;
    }

    padding: 10px 0px 30px;
    border-bottom: 1px solid #cecece;
    overflow: hidden;
    }

    .commontTimeIn {
        float: right;
        color: #a5a5a5;
        font-size: 14px;
        float: right;
    }
    .commontListIn>span {
        position: relative;
        top: -10px;
    }
    .commonIn>div:last-child>div {
        border-bottom: none;
    }
</style>